<template>
  <div>
    <div class="index-article-box">
      <article v-for="(item, index) in articleList" :key="index">
        <div>{{ item.title }}</div>
        <div><span>2020年01月12日</span>·<span>学习记录</span></div>
      </article>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      articleList: [
        { title: "这是一个标题1", time: "2021年10月9日" },
        { title: "这是一个标题2", time: "2021年10月8日" },
      ],
    };
  },

  mounted() {},

  //登录时候按enter键进入
  created() {},

  beforeDestroy() {},

  methods: {},
};
</script>

<style scoped>
/* @keyframes hoverbox {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 10px 10px 20px rgb(68, 65, 65);
  }
} */

.index-article-box {
  max-width: 900px;
  margin: 60px auto;
  padding-bottom: 100px;
}

.index-article-box article {
  background-image: url("http://r0isfzwov.hn-bkt.clouddn.com/bg-2.png");
  background-size: cover;
  padding: 70px 20px;
  margin-top: 50px;
  border-radius: 10px;
  opacity: 0.9;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  cursor: pointer;
}

.index-article-box article:hover {
    box-shadow: 10px 10px 20px rgb(68, 65, 65);

}

.index-article-box article div:first-child {
  font-size: 30px;
  padding-bottom: 20px;
}

/* @media screen and (max-width: 750px) {
  .index-bar {
    display: none;
  }
} */
</style>